<template>
	<view>67
		<canvas style="width: 100%; height: 1000px; background: #e1ebe6;" canvas-id="id" id="id"></canvas>
		55
	</view>
</template>

<script>
	export default {
		name: 'section',
		props:{
			 
		},
		data() {
			return {
				section:null
			}
		}, 
		created(){
			
			//this.section = uni.createCanvasContext(this.id,this);			
	        //this.drawRectangle(100,100,100,200,"西1");
			
			//this.drawRectangle(300,300,300,600);
			
			//this.section.draw()
		},
		methods: {
			//矩形
			drawRectangle: function(x, y, width, height, title){
				let canvas = this.section;
				canvas.save();
				
				//边框
				canvas.setLineWidth(3);
				canvas.strokeRect(x, y, width, height);
				
				//填充色
				canvas.setFillStyle("#b0bab4");
				canvas.fillRect(x, y, width, height);
				
				//名称
				canvas.setFillStyle("#000000");
				canvas.setFontSize(20);
				let dimension = canvas.measureText(title);				
				canvas.fillText(title, x+width/2-dimension.width/2, y+height/2);
				 
				//标注
				this.widthMarkPosition(x,y,width,height);
				this.heightMarkPostion(x,y,width,height);
				
				canvas.restore();
			},
			
			widthMarkPosition: function(x,y,width,height){
				let canvas = this.section; 
				
				canvas.setShadow(0, 0, 30, '#ffffff');
				canvas.setFillStyle("#000000");
				canvas.setFontSize(20);
				
				let mark_width_text = width+"mm";
				let dimension = canvas.measureText(mark_width_text); 
				let width_mark_x = x + width/2 - dimension.width/2;
				let width_mark_y = y+5;
				
				canvas.translate(width_mark_x, width_mark_y);
				
				canvas.fillText(mark_width_text, 0, 0);
				canvas.fillText(mark_width_text, 0, height);
				canvas.restore();				
			},
			
			heightMarkPostion: function(x,y,width,height){
				let canvas = this.section;
				 
				canvas.setShadow(0, 0, 30, '#ffffff');
				canvas.setFillStyle("#000000");
				canvas.setFontSize(20);
				
				let mark_height_text = height+"mm";
				let dimension = canvas.measureText(mark_height_text);
				//console.log(dimension.width)
				let height_mark_x  = x - 8;
				let height_mark_y = y + height/2 - dimension.width/2;
				
				canvas.translate(height_mark_x, height_mark_y);
				canvas.rotate(90 * Math.PI / 180);
				
				canvas.fillText(mark_height_text, 0, 0);
				canvas.fillText(mark_height_text, 0, -width);
				canvas.restore();
			}, 
			 
		}
	}
</script>

<style>
</style>